/**
 * 状态条组件
 * @param {*} opt 
 * @returns 
 */
function scStatusbar(opt){
    var com = scCommon.instance();
    var crEle = com.crEle;
    
    opt = opt ? opt : {};

    var zoomList = [
        {label: "300%", value: 3},
        {label: "250%", value: 2.5},
        {label: "200%", value: 2},
        {label: "150%", value: 1.5},
        {label: "100%", value: 1},
        {label: "80%", value: 0.8},
        {label: "50%", value: 0.5},
    ];

    var modeList = [
        {label: "设计模式", value: "design"},
        {label: "表单模式", value: "form"},
        {label: "只读模式", value: "readonly"},
    ];

    var multipList = [
        {label: "一行两页", value: 2},
        {label: "一行三页", value: 3},
        {label: "一行四页", value: 4}
    ];

    var pageList = [];

    var scale = 1;

    var statusBar = null;
    var pageBar = null;

    /**
     * 创建布局视图
     * @param {*} option 
     */
    this.createView = function(option){
        option = option ? option : {};

        // container.appendChild(layout);
        statusBar = crEle(null, "sc-statusbar");

        pageBar = crEle(null, "sc-statusbar-item,sc-pagebar");
        let countBar = crEle(null, "sc-statusbar-item,sc-countbar");
        let modeBar = crEle(null, "sc-statusbar-item,sc-modebar");
        let blankBar = crEle(null, "sc-blankbar");
        let zoomBar = crEle(null, "sc-statusbar-item,sc-zoombar");

        //显示页码
        let pageBarContent = crEle(null, "sc-pagebar-content");
        pageBarContent.innerText = "第 1 页，共 1 页";
        pageBar.appendChild(pageBarContent);

        //字符统计
        countBar.innerText = "0 字符";

        //显示模式
        let modeBarContent = crEle(null, "sc-modebar-content");
        modeBarContent.innerText = "设计模式";
        modeBar.appendChild(modeBarContent);

        let modeDropdown = crEle(null, "sc-statusbar-dropdown");
        modeBar.appendChild(modeDropdown);

        let ul = crEle("ul");
        modeDropdown.appendChild(ul);

        for(let i in modeList){
            li = crEle("li");
            li.innerText = modeList[i].label;
            ul.appendChild(li);
            modeList[i].element = li;
        }

        modeBar.addEventListener("click", (e)=>{
            setDropdownVisible(modeDropdown, 0, 30);
        });

        modeDropdown.addEventListener("click", (e)=>{
            if(e.target.tagName.toLowerCase() == "li"){
                let item = modeList.find(it=>it.element === e.target);
                triggerListener("click", "setSetting", {docMode: item.value});
                modeBarContent.innerText = item.label;
            }
        });

        //显示单页
        let singlePage = crEle(null, "sc-statusbar-item,sc-single-page,active");
        let image = crEle("img");

        singlePage.title = "单页显示";
        image.src = scToolbarResource.singlePage;
        singlePage.appendChild(image);

        //显示多页
        let multiplePage = crEle(null, "sc-statusbar-item,sc-multiple-page");
        image = crEle("img");

        multiplePage.title = "多页显示";
        image.src = scToolbarResource.multiplePage;
        multiplePage.appendChild(image);

        let multipDropdown = crEle(null, "sc-statusbar-dropdown");
        multiplePage.appendChild(multipDropdown);

        ul = crEle("ul");
        multipDropdown.appendChild(ul);

        for(let i in multipList){
            li = crEle("li");
            li.innerText = multipList[i].label;
            ul.appendChild(li);
            multipList[i].element = li;
        }

        multipDropdown.addEventListener("click", (e)=>{
            if(e.target.tagName.toLowerCase() == "li"){
                let item = multipList.find(it=>it.element === e.target);
                triggerListener("click", "setSetting", {multiplePageNum: item.value});
            }
        });

        singlePage.addEventListener("click", ()=>{
            triggerListener("click", "setSetting", {multiplePageNum: 1});
            multiplePage.classList.remove("active");
            singlePage.classList.add("active");
        });

        multiplePage.addEventListener("click", ()=>{
            // triggerListener("click", "setSetting", {multiplePageNum: 2});
            setDropdownVisible(multipDropdown, 0, 30);
            singlePage.classList.remove("active");
            multiplePage.classList.add("active");
        });

        //显示缩放
        let plus = crEle(null, "sc-statusbar-plus");
        let minus = crEle(null, "sc-statusbar-minus");
        let select = crEle(null, "sc-statusbar-select");
        let selectLabel = crEle(null, "sc-select-label");

        plus.innerText = "＋";
        minus.innerText = "－"
        selectLabel.innerText = "100%";

        select.appendChild(selectLabel);
        
        let zoomDropdown = crEle(null, "sc-statusbar-dropdown");
        select.appendChild(zoomDropdown);

        ul = crEle("ul");
        zoomDropdown.appendChild(ul);

        for(let i in zoomList){
            li = crEle("li");
            li.innerText = zoomList[i].label;
            ul.appendChild(li);
            zoomList[i].element = li;
        }

        zoomBar.appendChild(minus);
        zoomBar.appendChild(select);
        zoomBar.appendChild(plus);

        statusBar.appendChild(pageBar);
        statusBar.appendChild(countBar);
        statusBar.appendChild(modeBar);
        statusBar.appendChild(blankBar);
        statusBar.appendChild(multiplePage);
        statusBar.appendChild(singlePage);
        statusBar.appendChild(zoomBar);

        select.addEventListener("click", (e)=>{
            setDropdownVisible(zoomDropdown, 0, 25);
        });

        zoomDropdown.addEventListener("click", (e)=>{
            if(e.target.tagName.toLowerCase() == "li"){
                let item = zoomList.find(it=>it.element === e.target);
                selectLabel.innerText = item.label;
                scale = item.value;
                triggerListener("click", "zoom", item.value);
            }
        });

        plus.addEventListener("click", (e)=>{
            scale = parseFloat((scale + 0.1).toFixed(1));
            scale = scale > 3 ? 3 : scale;
            selectLabel.innerText = parseInt(scale * 100) + "%";
            triggerListener("click", "zoom", scale);
        });

        minus.addEventListener("click", (e)=>{
            scale = parseFloat((scale - 0.1).toFixed(1));
            scale = scale < 0.3 ? 0.3 : scale;
            selectLabel.innerText = parseInt(scale * 100) + "%";
            triggerListener("click", "zoom", scale);
        });

        return statusBar;
    }

    /**
     * 触发监听器
     * @param {*} eventType 
     * @param {*} command
     * @param {*} value 
     */
    var triggerListener = function(eventType, command, value){
        if(!listener[eventType]) return;

        for(var i in listener[eventType]){
            listener[eventType][i](command, value);
        }
    }

    /**
     * 监听器
     */
    var listener = {};

    /**
     * 添加监听器
     * @param {*} name 
     * @param {*} callback 
     */
    this.addEventListener = function(name, callback){
        if(!listener[name]){
            listener[name] = [];
        }

        listener[name].push(callback);
    }

    /**
     * 当前显示的下拉框
     */
    var displayDropdown = null;

    /**
     * 当前页面信息
     */
    var currentPageInfo = null;

    /**
     * 消息通知
     * @param {*} eventType 事件类型
     * @param {*} evt
     */
    this.notify = function(eventType, evt){
        if(eventType == "mousedown"){
            if(displayDropdown){
                setDropdownVisible(displayDropdown);
            }
        }else if(eventType == "zoom"){
            var selectLabel = statusBar.querySelector(".sc-select-label");
            selectLabel.innerText = parseInt((parseFloat(evt) * 100)) + "%";
            scale = evt;
        }else if(eventType == "contentStatistics"){
            setPageInfo(evt);
            currentPageInfo = evt;
        }else if(eventType == "pageChange"){
            if(!currentPageInfo) return;
            currentPageInfo.pageIndex = evt;
            setPageInfo(currentPageInfo);
        }else if(eventType == "settingChange"){
            setModeInfo(evt);
        }
    }

    var pageSize = null;

    /**
     * 设置页面信息
     * @param {*} data 
     */
    var setPageInfo = function(data){
        pageSize = data.pageSize;

        var pageBarContent = statusBar.querySelector(".sc-pagebar>.sc-pagebar-content");
        pageBarContent.innerText = "第 " + data.pageIndex + " 页，共 " + data.pageSize + " 页";

        var countbar = statusBar.querySelector(".sc-countbar");
        countbar.innerText = (data.textLength ? data.textLength : 0) + " 字符";

        setPageDropdown(data);
    }

    /**
     * 设置当前页
     * @param {*} data 
     */
    var setPageIndex = function(data){
        let pageBarContent = statusBar.querySelector(".sc-pagebar>.sc-pagebar-content");
        pageBarContent.innerText = "第 " + data.pageIndex + " 页，共 " + data.pageSize + " 页";
    }

    /**
     * 设置选择页下拉框
     * @param {*} data 
     */
    var setPageDropdown = function(data){
        let pageDropdown = pageBar.querySelector(".sc-statusbar-dropdown");
        if(!pageDropdown){
            pageDropdown = crEle(null, "sc-statusbar-dropdown");

            pageBar.appendChild(pageDropdown);

            pageBar.addEventListener("click", (e)=>{
                setDropdownVisible(pageDropdown, 0, 30);
            });
    
            pageDropdown.addEventListener("click", (e)=>{
                if(e.target.tagName.toLowerCase() == "li"){
                    let item = pageList.find(it=>it.element === e.target);
                    triggerListener("click", "locatePage", {pageIndex: item.value});
                    setPageIndex({
                        pageIndex: item.value,
                        pageSize: pageSize
                    });
                }
            });
        }

        pageList = [];

        let ul = crEle("ul");
        for(var i = 1; i <= data.pageSize; i++){
            li = crEle("li");
            li.innerText = "第 " + i + " 页";
            ul.appendChild(li);

            let page = {
                value: i,
                element: li
            };
            pageList.push(page);
        }

        pageDropdown.innerHTML = "";
        pageDropdown.appendChild(ul);
    }

    /**
     * 设置模式信息
     * @param {*} data 
     */
    var setModeInfo = function(data){
        var modebar = statusBar.querySelector(".sc-modebar>.sc-modebar-content");
        var modeName = "";

        switch(data.docMode){
            case "design":
                modeName = "设计模式";
                break;
            case "form":
                modeName = "表单模式";
                break;
            case "readonly":
                modeName = "只读模式";
                break;
            case "preview":
                modeName = "预览模式";
                break;
            case "locked":
                modeName = "锁定模式";
                break;
        }

        modebar.innerText = modeName;
    }

    /**
     * 设置下拉框是否可见
     * @param {*} dropdown 
     * @param {*} left 
     * @param {*} bottom 
     * @returns 
     */
    var setDropdownVisible = function(dropdown, left, bottom){
        if(!dropdown) return false;

        if(dropdown.classList.contains("active")){
            dropdown.classList.remove("active");
            displayDropdown = null;

            return false;
        }else{
            if(displayDropdown){
                displayDropdown.classList.remove("active");
            }

            dropdown.classList.add("active");
            dropdown.style.left = (left ? left : 0) + "px";
            dropdown.style.bottom = (bottom ? bottom : 0) + "px";

            displayDropdown = dropdown;

            return true;
        }
    }
}